$(function () {

    var currentPage = 1; // 记录当前页面
    var pageSize = 5; // 每页条数

    // 1 - 首页数据动态渲染
    // 1- 通过ajax 去后台 获取 用户数据
    // 2- 通过模板引擎把数据渲染到页面中
    // 我们对数据进行任何操作后，都需要重新渲染 ， 直接把渲染输的方法封装！
    function render() {
        $.ajax({
            url: 'customer/findAll',
            type: "post", // 设置ajax请求方式
            /*    data: {
                   currentPage: currentPage, // 页码
                    pageSize: pageSize // 每页条数
                },*/
            data: '{"currentPage":"1", "pageSize":"10"}',
            contentType: 'application/json;charset=utf-8',
            success: function (res) {
                let data = res.data;
                $('tbody').html(template('tmp', data));
                // res.total 表示的是数据库数据的总数
                // 根据后台返回的真实总数 ，来生成分页标签
                setPage(res.data.total);
            }
        })
    }

    render();

    // 3- 禁用启用功能
    // 1- 用户点击 禁用/启用按钮 ， 弹出模态框 ， 获取用户的id 和 要都进行操作（禁用，启用）
    // 2- 当点击确定操作按钮后，就通过ajax把 id 和操作发送给后台， 让后台进行操作
    // 3- 操作完成后，页面重新渲染， 看到操作后结果

    /*var id = null; //用户id
    var isDelete = null; // 要进行操作
    // 1- 用户点击 禁用/启用按钮 ， 弹出模态框 ， 获取用户的id 和 要都进行操作（禁用，启用）
    $('tbody').on('click', '.btn-exec', function () {
      // 获取用户的id
      // id = $(this).parent().attr('data-id');
      id = $(this).parent().data('id');  // data-id data-name  data('name');
      // 要都进行操作（禁用 0，启用 1）
      isDelete = $(this).hasClass('btn-info') ? 1 : 0;
      console.log(id, isDelete);
    })

    // 2- 当点击确定操作按钮后，就通过ajax把 id 和操作发送给后台， 让后台进行操作
    // 3- 操作完成后，页面重新渲染， 看到操作后结果
    $('.btn-ok').click(function () {
      $.ajax({
        type: 'post',
        url: '/user/updateUser',
        data: {
          id: id,
          isDelete: isDelete
        },
        dataType: 'json',
        success: function (res) {
          console.log(res);
          // 隐藏模态框
          $('.modal-user').modal('hide');
          // 重新渲染
          render();
        }
      })
    })
  */
    // 1-分页功能
    // 1- 获取数据库数据的总数，根据总数 推算出页码
    // 2- 根据算出页码，生成对应的分页按钮（插件实现）
    // 3- 分页按钮个数，会根据数据的总数 变换而变化！

    // total 表示 数据库的数据的总数！
    function setPage(total) {
        //使用分页插件来生成 分页按钮  bootstrap-paginator.js
        $("#paginator").bootstrapPaginator({
            bootstrapMajorVersion: 3, //默认是2，如果是bootstrap3版本，这个参数必填
            currentPage: currentPage, // 默认那个按钮高亮
            totalPages: Math.ceil(total / pageSize),// 指定分页按钮的个数  12/5  --> 3
            onPageClicked: function (event, originalEvent, type, page) {
                //当每个分页按钮被点击后台，会执行这个函数 ， page 表示当前被点击页面
                console.log('page:', page);
                // 改变当前页取值
                currentPage = page;
                // 页面需要重新渲染
                render();
            }
        });
    }


// 6-表单校验
    //使用表单校验插件
    $('.add-form').bootstrapValidator({
        //1. 指定不校验的类型，默认为[':disabled', ':hidden', ':not(:visible)'],可以不设置
        excluded: [':disabled'],

        //2. 指定校验时的图标显示，默认是bootstrap风格
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },

        //3. 指定校验字段
        fields: {
            //校验用户名，对应name表单的name属性
            // 二级分类id
            brandId: {
                validators: {
                    //不能为空
                    notEmpty: {
                        message: '请选择二级分类'
                    }
                }
            },
            // 商品名称
            proName: {
                validators: {
                    //不能为空
                    notEmpty: {
                        message: '请输入商品名称'
                    }
                }
            },
            // 商品描述
            proDesc: {
                validators: {
                    //不能为空
                    notEmpty: {
                        message: '请输入商品描述'
                    }
                }
            },
            // 商品库存
            num: {
                validators: {
                    //不能为空
                    notEmpty: {
                        message: '请输入商品库存'
                    },
                    //正则校验
                    regexp: {
                        regexp: /^[1-9]\d*$/,
                        message: '必须是非零开头的数字！'
                    }
                }
            },
            // 商品尺码
            size: {
                validators: {
                    //不能为空
                    notEmpty: {
                        message: '请输入商品尺码'
                    },
                    //正则校验
                    regexp: {
                        regexp: /^[1-9]\d-[1-9]\d$/,
                        message: '尺码必须是xx-xx格式，x是数字！'
                    }
                }
            },
            // 商品原价
            oldPrice: {
                validators: {
                    //不能为空
                    notEmpty: {
                        message: '请输入商品原价'
                    },
                    //正则校验
                    regexp: {
                        regexp: /(^[1-9]\d*(\.\d{1,2})?$)|(^0(\.\d{1,2})?$)/,
                        message: '价格必须是价格(整数、小数）！'
                    }
                }
            },
            // 商品现价
            price: {
                validators: {
                    //不能为空
                    notEmpty: {
                        message: '请输入商品现价'
                    },
                    //正则校验
                    regexp: {
                        regexp: /(^[1-9]\d*(\.\d{1,2})?$)|(^0(\.\d{1,2})?$)/,
                        message: '价格必须是价格(整数、小数）！'
                    }
                }
            },
        }

    });

    // 7-手动恢复 下拉列表和图片的校验张图
    // 1- 下拉列表选中 数据后，恢复下拉列表的校验状态
    // 2- 图片上传够3张， 恢复图片的校验状态


    // 8- 正则校验
    // 库存： 非零开头的数字
    // 尺码： xx-xx 格式， x 是数字  20-30
    // 价格： 必须是一个合理价格


    // 9- 添加商品到服务器
    // 1- 添加添加按钮，并在数据校验合理的情况下，向后台发送请求，添加数据 success.form.bv事件
    // 2- 商品添加完成， 模态框隐藏，页面重新渲染， 表单重置， 手动重置

    //

    $('.add-form').on('success.form.bv', function (e) {
        e.preventDefault(); //阻止默认行为

        console.log($('.add-form')[0])
        console.log(1111111)
       // $('.add-form')[0].reset()
        // this.reset()
        console.log($('.add-form').serializeArray())
        // console.log($.parseJSON( $('.add-form').serialize() ))

        var fields = $('.add-form').serializeArray();
        var obj = {}; //声明一个对象
        $.each(fields, function (index, field) {
            obj[field.name] = field.value; //通过变量，将属性值，属性一起放到对象中
        })

        console.log(obj)
        // ajax发送数据给后台
        $.ajax({
            type: 'post',
            url: '/customer/addCustomer',
            // data: $('.add-form').serialize(),
            data: JSON.stringify(obj),//将对象转为json字符串
            // data: JSON.parse(str);
            //data: $.parseJSON( $('.add-form').serialize() ),
            dataType: 'json',
            contentType: 'application/json;charset=utf-8',
            success: function (res) {
                // 模态框隐藏
                $('.modal-add').modal('hide');
                // 页面重新渲染
                render();
                // 重置数据和校验样式
                $('.add-form').data('bootstrapValidator').resetForm(true);
                // 手动重置 下拉列表 和图片的校验状态
                $('.img-box').empty(); //清空img-box
                // 数据重置 (吃完饭洗完)
                picArr = [];  // 避免下次添加商品时，之前数据对添加产生影响
            }
        })

    })


    $('tbody').on('click', '.btn1', function (e) {
        e.preventDefault()
        let idx = $(this).attr('data-a')
        console.log(idx);
        $.ajax({
            url: '/customer/findById?id=' + idx,
            type: "get", // 设置ajax请求方式
            contentType: 'application/json;charset=utf-8',
            success: function (res) {
                if (res.flag) {
                    console.log(res.data)
                    $('[name="id"]').val(res.data.id);
                    $('[name="customerName"]').val(res.data.customerName);
                    $('[name="gender"]').val(res.data.gender == '1' ? '男' : '女');
                    $('[name="address"]').val(res.data.address);
                    $('[name="telephone"]').val(res.data.telephone);
                    $('[name="remark"]').val(res.data.remark);
                    $('[name="birthday"]').val(res.data.birthday);
                    $('[name="station"]').val(res.data.station);
                    // $('#form2').html(template('formdata', res.data));
                } else {
                    this.$message.error(res.data.message);
                }
            }
        })
        render();
    })
    $('#clear').on('click', function (e) {
        $('[name="id"]').val("");
        $('[name="customerName"]').val("");
        $('[name="gender"]').val("");
        $('[name="address"]').val("");
        $('[name="telephone"]').val("");
        $('[name="remark"]').val("");
        $('[name="birthday"]').val("");
        $('[name="station"]').val("");
    })


    $('.modal-edit').on('click', '.btn2', function (e) {
        e.preventDefault()
        // console.log($('.edit-form').serializeArray())
        var fields = $('.edit-form').serializeArray();
        var obj = {}; //声明一个对象
        $.each(fields, function (index, field) {
            obj[field.name] = field.value; //通过变量，将属性值，属性一起放到对象中
        })
        //console.log(obj)
        $.ajax({
            type: 'post',
            url: '/customer/updateAccount',
            data: JSON.stringify(obj),//将对象转为json字符串
            dataType: 'json',
            contentType: 'application/json;charset=utf-8',
            success: function (res) {
                console.log($('.edit-form')[0]);
                $('.edit-form')[0].reset();
                // 模态框隐藏
                $('.modal-edit').modal('hide');
                // 页面重新渲染
                render();
                // 重置数据和校验样式
                $('.add-form').data('bootstrapValidator').resetForm(true);
                // 手动重置 下拉列表 和图片的校验状态
                $('.img-box').empty(); //清空img-box
                // 数据重置 (吃完饭洗完)
                picArr = [];  // 避免下次添加商品时，之前数据对添加产生影响
            }
        })
    })


    //<a href="/customer/deleteById?id={{v.id}}">删除</a>
    $('tbody').on('click', '.btn3', function (e) {
        e.preventDefault()
        let idx = $(this).attr('data-a')
        console.log(idx);
        $.ajax({
            url: '/customer/deleteById?id=' + idx,
            type: "get", // 设置ajax请求方式
            contentType: 'application/json;charset=utf-8',
            success: function (res) {
                if (res.flag) {
                    render();
                } else {
                    this.$message.error(res.data.message);
                }
            }
        })

    })

});